<template>
  <div class="text-white text-xs">
    <SkipHydration>
      <h1 class="text-center font-serif text-2xl mt-6 mb-4">{{ articleData.title }}</h1>
      <p class="text-gray-light text-center lg:w-[1000px] mx-auto">{{ articleData.description }}</p>
      <p class="text-gray font-mono text-center mt-3 lg:pb-5 lg:border-b lg:border-b-neutral-700">
        {{ $mt('Author') }} : BitTopup | {{ $mt('Publish at') }} :
        {{ dayjs(articleData.createdAt).format('YYYY/MM/DD') }}
      </p>
      <!--    富文本内容-->
      <article
        v-if="articleData.content.length > 2"
        class="text-gray-light ql-editor news-article lg:w-[1100px] mt-2 break-all"
        v-html="articleData.content"></article>
      <div
        class="w-full lg:w-[1100px] mx-auto mt-3 mb-10 grid grid-cols-2 gap-2"
        :class="{ 'grid-cols-1': articleData.images.length < 2 }"
        v-if="articleData.images.length">
        <YImage
          class="w-full rounded-md h-[120px] lg:h-[450px] object-cover mx-auto mb-1"
          v-for="img in articleData.images"
          compress
          width="450"
          height="350"
          :src="$withPicOrigin(img)"
          :alt="articleData.title" />
      </div>
      <!-- 上一篇下一篇 h5-->
      <div
        v-if="articleData.prevNews || articleData.nextNews"
        class="w-full lg:w-[1100px] lg:mx-auto lg:flex items-center justify-between grid grid-cols-1 gap-y-6 mt-14">
        <!-- Previous -->
        <div class="lg:w-[48%] lg:shrink-0">
          <NuxtLink
            external
            :to="$localePath(`/article/${articleData.prevNews?.urlName || articleData.prevNews?.id}`)"
            v-if="articleData.prevNews"
            class="flex items-center cursor-pointer group w-full">
            <div class="w-28 shrink-0 h-16 lg:w-36 lg:h-20 rounded mr-3 overflow-hidden">
              <y-image
                class="w-full h-full object-cover rounded transition-all duration-200 ease-in group-hover:scale-[1.1]"
                type="goods"
                :alt="articleData.prevNews?.title"
                :src="articleData.prevNews?.imageUrl" />
            </div>
            <div class="flex flex-col justify-between">
              <div class="text-xs lg:text-sm lg:font-semibold text-[#F4F4F4FF] opacity-85 mb-2">
                {{ $mt('Previous') }}
              </div>
              <h4 class="text-xs leading-4 line-clamp-2">{{ articleData.prevNews?.title }}</h4>
            </div>
          </NuxtLink>
        </div>
        <!-- Next -->
        <div class="lg:w-[48%] lg:shrink-0">
          <NuxtLink
            external
            :to="$localePath(`/article/${articleData.nextNews?.urlName || articleData.nextNews?.id}`)"
            v-if="articleData.nextNews"
            class="flex lg:flex-row-reverse items-center cursor-pointer w-full lg:justify-start group">
            <div class="w-28 shrink-0 h-16 lg:w-36 lg:h-20 rounded mr-3 lg:mr-0 lg:ml-3 overflow-hidden">
              <y-image
                class="w-full h-full object-cover rounded transition-all duration-200 ease-in group-hover:scale-[1.1]"
                type="goods"
                :alt="articleData.nextNews?.title"
                :src="articleData.nextNews?.imageUrl" />
            </div>
            <div class="flex flex-col justify-between lg:items-end">
              <div class="text-xs lg:text-sm lg:font-semibold text-[#F4F4F4FF] opacity-85 mb-2">{{ $mt('Next') }}</div>
              <h4 class="text-xs leading-4 line-clamp-2 text-right">{{ articleData.nextNews?.title }}</h4>
            </div>
          </NuxtLink>
        </div>
      </div>
      <!-- 推荐商品 -->
      <div v-if="articleData.goodsList.length" class="lg:w-[1100px] mx-auto">
        <h2 class="text-xl border-t-[0.5px] border-t-[#625d5da7] font-medium mb-4 mt-6 pt-4 uppercase">
          {{ $mt('recommend products') }}
        </h2>
        <div class="mx-auto px-2 grid grid-cols-1 lg:grid-cols-3 gap-y-4 lg:gap-y-6 gap-x-4">
          <NuxtLink
            external
            :to="$localePath(`/goods/${item.urlName || item.id}`)"
            class="flex items-center lg:items-start lg:hover:bg-[rgba(255,255,255,.1)] lg:rounded-lg transition duration-75 box-border"
            v-for="(item, idx) in articleData.goodsList"
            :key="idx">
            <YImage
              class="rounded-lg w-14 h-14 lg:h-[120px] lg:w-[120px] ltr:mr-3 rtl:ml-3 shrink-0"
              width="120"
              height="120"
              :alt="`${$mt('how to recharge')} ${item.name}`"
              :src="$withPicOrigin(item.smallIcon)" />
            <!-- 商品右边的信息 -->
            <div class="lg:flex flex-col item-start justify-around h-full">
              <!-- name 地区 -->
              <div>
                <h4 class="text-sm font-medium mb-1 lg:text-base line-clamp-2 transition-all duration-300">
                  {{ item.name }}
                </h4>
                <div class="lg:flex items-center lg:mb-4 transition-all duration-300">
                  <WImage class="lg:mr-1 mb-1 lg:mb-0 h-3.5 w-3.5" :src="useAsset('detail/item_icon_region.png')" />
                  <p class="text-[#b0b4c0] text-xs transition-all duration-300">{{ item.areaCode }}</p>
                </div>
              </div>
              <!-- 销量和评价 -->
              <div class="items-center hidden lg:flex">
                <div class="ltr:mr-3 rtl:ml-3 flex items-center">
                  <WImage class="mr-2 h-3 w-3" :src="useAsset('cart.png')" />
                  <span>{{ item.totalSaleCount }}</span>
                </div>
                <div class="flex items-center text-xs text-[#eee]">
                  <WImage class="mr-2 h-3 w-3" :src="useAsset('shoucang.png')" />
                  <span>{{ item.avgRate }}</span>
                </div>
              </div>
            </div>
          </NuxtLink>
        </div>
      </div>
      <!-- 推荐文章 -->
      <div class="lg:w-[1100px] mx-auto" v-if="articleData.recommendNews.length">
        <h2 class="text-xl border-t-[0.5px] border-t-[#625d5da7] font-medium mb-4 mt-6 pt-4 uppercase">
          {{ $mt('Recommended News') }}
        </h2>
        <div class="mx-auto px-2 grid grid-cols-2 lg:grid-cols-4 gap-y-4 lg:gap-y-6 gap-x-4">
          <div v-for="item in articleData.recommendNews" :key="item.id">
            <NewHomeDesItem :data="item" />
          </div>
        </div>
      </div>
    </SkipHydration>
  </div>
</template>

<script setup lang="ts">
import { useArticleSeo } from '~/composables/useTdk'
import YImage from '~/components/logic/YImage.vue'
import WImage from '~/components/logic/WImage.vue'
import { useAsset } from '~/utils'
import NewHomeDesItem from '~/components/home/NewHomeDesItem.vue'
import dayjs from 'dayjs'

const { $mt } = useCommonPlugin()
const { articleId } = useRoute().params
const { requestGetNew } = useRequest()
const { data: articleData } = await useAsyncData(
  async () => {
    if (!articleId) return {}
    let res = {}
    try {
      res = await requestGetNew(`/app/news/newsById`, { id: articleId })
    } catch (e) {
      throw showError({ statusCode: 404, message: $mt('news not found') })
    }
    return res
  },
  { default: () => ({}) },
)
if (!articleData?.value?.id) throw showError({ statusCode: 404, message: $mt('news not found') })
try {
  useArticleSeo(articleData.value)
} catch (e) {
  throw showError({ statusCode: 404, message: $mt('news not found') })
}
</script>
<style lang="scss">
@import 'assets/quill.core.css';

.news-article {
  white-space: pre-wrap;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
  padding: 20px 10px 0;
  line-height: 2;

  * {
    all: revert;
    word-break: break-word;
  }

  p {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  ul,
  ol {
    padding: 0;
  }

  a {
    margin-left: 0 !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  h7 {
    margin-top: 10px;
  }
}

.news-article img {
  margin: 0.5em auto 0;
  max-width: 100%;
}

.news-article a {
  text-decoration: underline;
  margin: 0 0.3em;
  color: #0066cc;
  cursor: pointer;
}
</style>
